<template>
	<el-menu
		unique-opened
		router
		height="100%"
		:default-active="$route.path"
		background-color="#1F232F"
		text-color="rgba(255, 255, 255, 0.6)"
		active-text-color="#fff"
		class="el-menu-vertical-demo"
		:collapse="isCollapse"
	>
		<SubMenu :menuList="menus" />
	</el-menu>
</template>

<script>
import { mapGetters } from 'vuex'
import SubMenu from './SubMenu.vue'
// import routers from '@/router/router.config'
export default {
	props: { isCollapse: { type: Boolean, default: false } },
	components: { SubMenu },
	data() {
		return {
			data: '',
			userinfo: JSON.parse(window.sessionStorage.getItem('userinfo')) || {},
			white_names: ['676487', '684328', '682890', '671861', '627581', '131359', '570121', '161902', '684328']
		}
	},
	watch: {
		isCollapse: function (val) {
			let scrollbar = document.querySelector('.scrollbar')
			if (scrollbar) {
				val = true
				scrollbar.style.minWidth = '55px'
			}
			return val
		}
	},
	methods: {
		changeMenu(i) {
			this.data[i].isActive = !this.data[i].isActive
		}
	},
	computed: {
		...mapGetters(['menus'])
	}
}
</script>

<style lang="less" scoped>
.el-menu--collapse {
	min-height: 100%;
}
.el-menu-vertical-demo {
	min-height: 120%;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
	width: 160px;
	min-height: 100%;
}

.el-menu-vertical-demo {
	.el-menu-item.is-active {
		background: linear-gradient(90deg, #3161ff 0%, #1f232f 100%) !important;
	}
}
</style>
